<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="dexie.min.js"></script>
    <link rel="stylesheet" href="ht.css">

</head>



<body>

    <div>
        <h1 style="text-align: center;color: darkgreen;">
            银河电脑出库小软件
        </h1>
    </div>


    <section class="grid2">

        <form>

            <label for="num">编号:&nbsp;</label><input type="text">
            <label for="name">客户:&nbsp;</label><input type="text">
            <label for="address">地址:&nbsp;</label><input type="text">
            <label for="tel">电话:&nbsp;</label><input type="text">

        </form>

        <div>
            <button id="btn_reset_data">重置数据</button>
            <button id="btn_print_table">打印表格</button>
        </div>

    </section>
    <section class="grid2">

        <form id="frm_product">

            <label for="name">品名:&nbsp;</label><input type="text" name="name" value="KST500G">
            <label for="price">单价:&nbsp;</label><input type="text" name="price" value="1000">
            <label for="count">数量:&nbsp;</label><input type="text" name="count" value="5">
            <label for="total">总价:&nbsp;</label><input type="text" name="total" value="5000">
            <label for="comment">备注:&nbsp;</label><input type="text" name="comment" value="三年质保">

        </form>

        <div>
            <button id="btn_add_row">添加数据</button>
            <button>提交数据</button>
        </div>

    </section>

    <main>

        <!-- <div style="align-items: center !important;">

            <span style="color: darkgreen;font-size: 20px;">清单明细</span>

        </div> -->

        <div>


            <table id="tbData">

                <caption>清单明细</caption>

                <thead>
                    <tr>

                        <th>序号</th>
                        <th>品名</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th>备注</th>
                        <th>操作</th>

                    </tr>
                </thead>

                <tbody id="tb">


                </tbody>


            </table>
        </div>


    </main>


    <article id="myprint">
          <div>
            hello
          </div>

    </article>






    <script>

        let rows = []
        const keys = ["name", "price", "count", "total", "comment"]

        function restTableData() {

            
            let tbody_html = ""
            rows.forEach((item, index) => {

                let trhtml = `<td>${index + 1}</td>`
                keys.forEach(key => {

                    trhtml += `<td>${item[key]}</td>`
                })

                trhtml = `<tr>${trhtml}<td><button class='deletebutton' data-row-id = ${index + 1}>删除</button>
                            <button class='modifybutton' data-row-id = ${index + 1}>修改</button></td></tr>`
                tbody_html += trhtml

            })

            const tbody = document.getElementsByTagName("tbody")[0]
            console.log(tbody)
            tbody.innerHTML = tbody_html

            //设置删除button的事件       
            const deleteButtonList = document.getElementsByClassName("deletebutton")
            console.log(deleteButtonList);

            Array.from(deleteButtonList).forEach((item, index) => {

                //删除rows中第index个元素
                item.addEventListener("click", () => {
                    rows.splice(index, 1)
                    restTableData()
                })


            })

        }

        document.getElementById("btn_add_row").addEventListener("click", () => {

            const obj_form_product = document.getElementById("frm_product")
            const formData = new FormData(obj_form_product)
            const row = {}
            formData.forEach((value, key) => {
                row[key] = value;
            });

            rows.push(row)
            restTableData()

            //重置表单数据
            // obj_form_product.reset()
            //将焦点放到品名处
            const obj_input_name = obj_form_product.querySelector("input[name='name']")
            obj_input_name.focus()


        })
        document.getElementById("btn_print_table").addEventListener("click", () => {

                obj_print_area = document.getElementById("myprint")

                str = ""
                rows.forEach((row,index)=>{

                    str+="<tr>"
                    keys.forEach(key=>{
                        str+=`<td>${row[key]}</td>`
                    })
                    str+="</tr>"                    

                })

                str = `<table><caption>清单明细</caption>${str}</table>`
                obj_print_area.innerHTML = str
                window.print()
        })





    </script>




    <!-- 
    <script>


        //初始化数据库
        // 定义数据库
        const db = new Dexie("yhdn_ck_db");

        // 定义数据库模式和版本
        db.version(1).stores({
            chuku: "++id, num,name,address,tel,date,*details" // 主键是自增的id
        });




        data = {
            num: "YHDN00000001",
            name: "派诺机械",
            address: "朝阳中学对面",
            tel: "13566666666",
            date: "2025-08-02",
            details: [
                { name: "i5 9400F", price: "1000", "count": 2, total: 2000 },
                { name: "i5 9500F", price: "1000", "count": 2, total: 2000 },
                { name: "i5 9600F", price: "1000", "count": 2, total: 2000 },
                { name: "i5 9700F", price: "2000", "count": 2, total: 4000 },
            ]
        };




            (async function(_data) {

                    await db.chuku.add(_data)

            })(data);




    </script>

 -->




</body>

</html>